<template>
	<!-- 返回会顶部按钮 搭配scroll-view使用 -->
	<view class="back-top-btn" :class="{ show: showBackTop }" @click="scrollToTop">
		<u-icon name="arrow-upward" size="24" color="#fff"></u-icon>
	</view>
</template>

<script>
export default {
	name: 'x-back-top',
	props: {},
	data() {
		return {
			showBackTop: false, // 是否显示返回顶部按钮
			lastScrollTop: 0 // 上次滚动位置（用于判断滚动方向）
		};
	},
	methods: {
		// 添加一个可通过ref调用的公共方法
		triggerHandleScroll(e) {
			this.handleScroll(e);
		},
		// 处理滚动事件
		handleScroll(e) {
			// 当前滚动位置
			const scrollTop = e.detail.scrollTop;

			// 显示/隐藏返回顶部按钮
			if (scrollTop > 300) {
				if (scrollTop < this.lastScrollTop) {
					// 向上滚动时显示按钮
					this.showBackTop = true;
				}
			} else {
				this.showBackTop = false;
			}

			// 保存当前滚动位置用于下次比较
			this.lastScrollTop = scrollTop;
		},
		// 滚动到顶部
		scrollToTop() {
			this.scrollTop = this.scrollTop ? 0 : 1; // 重置滚动位置
			this.showBackTop = false; // 隐藏按钮

			// 添加动画效果
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 1000,
				success: () => {
					// 滚动完成后触发事件并传递最终位置 (此时scrollTop应为0)
					this.$emit('scrollToTop', this.scrollTop);
				},
				fail: (err) => {
					console.error('滚动失败', err);
					// 失败时也可以触发事件（可选）
					this.$emit('scrollToTop', this.scrollTop);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* 返回顶部按钮 */
.back-top-btn {
	position: fixed;
	right: 30rpx;
	bottom: 120rpx; /* 位于底部导航上方 */
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #ff3a3a;
	box-shadow: 0 4rpx 16rpx rgba(255, 58, 58, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;
	opacity: 0;
	transform: translateY(100rpx);
	transition: all 0.3s ease;

	&.show {
		opacity: 1;
		transform: translateY(0);
	}

	/* 添加悬停效果 */
	&:active {
		transform: scale(0.95);
		background-color: #ff5555;
	}
}
</style>
